<template>
  <div class="main">
    <el-dialog
      :visible.sync="dialogVisible"
      :fullscreen="true"
      width="100%"
      :destroy-on-close="true"
      custom-class="look-info"
      :before-close="handleClose"
    >
      <!-- <div>
      <sidebar class="sidebar-container" />
    </div> -->
      <div style="margin-bottom:1vh">
        <navbar />
      </div>
      <el-row
        style="margin-bottom: 10px; display: flex; justify-content: flex-end"
      >
        <el-button type="primary" icon="el-icon-back" @click="dialogVisible = false" />

        <el-button v-print="print" type="primary">打印</el-button>
      </el-row>
      <!-- <pdf /> -->
      <div v-show="true" id="printArea">
        <el-row>
          <!-- 13 -->
          <el-col :span="isLook ? 24 : 13">
            <el-card class="box-card">
              <!-- <div class="left-title">申请人资料</div> -->

              <!-- 表格重做 -->
              <div style="margin:0 auto;">

                <!-- <div style="text-align:center;margin-top:10px;">个人简历</div> -->
                <div style=";font-family:MicrosoftYaHei;margin:0 auto;width:100%;height:5vh;line-height:5vh;background:#305fb4;color:#fff;text-align:center;font-weight:bold;font-size:1.2rem">申请人资料</div>

                <div style="display:flex;align-items:center;justify-content:space-around;margin:3vh 0;font-weight: bold;font-family:MicrosoftYaHei;">
                  <div>
                    <p style="font-size:.8vw">应聘单位 ：{{ personnelDetail.apply_college }}</p>
                  </div>
                  <div>
                    <p style="font-size:.8vw">应聘岗位 ：{{ personnelDetail.apply_post }}</p>
                  </div>
                </div>

                <table class="table table-striped table-bordered" align="center" valign="center">
                  <thead>
                    <tr>
                      <!-- <td>标题</td> -->
                    </tr>
                  </thead>

                  <tbody>
                    <tr>
                    <!-- <td class="column" colspan="7">基本信息</td> -->

                    </tr>
                    <tr>
                      <td class="column">姓名</td>
                      <td class="value">{{ personnelDetail.name }}</td>
                      <td class="column">英文名</td>
                      <td class="value">{{ personnelDetail.english_name }}</td>
                      <td class="column">年龄</td>
                      <td class="value">{{ personnelDetail.age }}</td>

                      <td class="value" rowspan="5">
                        <div class="avatar-img" style="/* background-color: red; */">
                          <img
                            style="width: 100%; height: 100%; margin-top: 0px"
                            :src="baseUrl + personnelDetail.avatar"
                            alt=""
                          >
                        </div>
                      </td>
                    </tr>
                    <tr>
                      <td class="column">性别</td>
                      <td class="value">{{
                        personnelDetail.sex == "0" ? "男" : "女"
                      }}</td>
                      <td class="column">国籍</td>
                      <td class="value">{{ personnelDetail.nationality }}</td>
                      <td class="column">籍贯</td>
                      <td class="value">{{ personnelDetail.native_place }}</td>

                    <!-- <td class="value"></td> -->
                    </tr>
                    <tr>
                      <td class="column">出生年月</td>
                      <td class="value">{{ personnelDetail.birth_time }}</td>
                      <td class="column">民族</td>
                      <td class="value">{{ personnelDetail.nation }}</td>
                      <td class="column">政治面貌</td>
                      <td class="value">{{
                        personnelDetail.political_outlook
                      }}</td>
                    <!-- <td class="value"></td> -->
                    </tr>
                    <tr>
                      <td class="column">最高学位</td>
                      <td class="value" colspan="2">{{ personnelDetail.degree }}</td>
                      <td class="column">身份证(护照)号</td>
                      <td class="value" colspan="2">{{ personnelDetail.id_card }}</td>
                    <!-- <td class="value"></td> -->

                    </tr>
                    <tr>
                      <td class="column">现从事学科</td>
                      <td class="value" colspan="2">{{ personnelDetail.school }}</td>
                      <td class="column">现研究方向</td>
                      <td class="value" colspan="2">{{ personnelDetail.research }}</td>
                    <!-- <td class="value" ></td> -->
                    </tr>
                    <tr rowspan="3">
                      <td class="column">手机号码</td>
                      <td class="value" colspan="2">{{ personnelDetail.mobile }}</td>
                      <td class="column">邮箱</td>
                      <td class="value" colspan="3">{{ personnelDetail.email }}</td>
                    <!-- <td class="value" ></td> -->
                    </tr>
                    <tr>
                      <td class="column">配偶姓名</td>
                      <td class="value" colspan="2">{{ personnelDetail.spouse_name }}</td>
                      <td class="column">工作单位</td>
                      <td class="value" colspan="3">{{ personnelDetail.spouse_unit }}</td>
                    <!-- <td class="value" ></td> -->
                    </tr>
                    <tr>
                      <td class="column">学历学位</td>
                      <td class="value" colspan="2">{{ personnelDetail.spouse_degree }}</td>
                      <td class="column">毕业院校</td>
                      <td class="value" colspan="3">{{ personnelDetail.spouse_school }}</td>
                    <!-- <td class="value" ></td> -->
                    </tr>
                    <tr>
                      <td class="column">拟加入团队</td>
                      <td class="value" colspan="6">{{ personnelDetail.apply_team }}</td>
                    </tr>
                    <tr>
                      <!-- <td class="column">教育经历(从本科填起)</td> -->
                      <td class="value" colspan="7" style="text-align:left">
                        教育经历(从本科填起) ：
                      </td>

                    </tr>
                    <tr>
                      <td class="value" colspan="1">学位</td>
                      <td class="value" colspan="1">起始时间</td>
                      <td class="value" colspan="1">终止时间</td>
                      <td class="value" colspan="1">国家或地区</td>
                      <td class="value" colspan="2">院校专业</td>
                      <td class="value" colspan="1">导师</td>
                    </tr>
                    <tr v-for="(item, index) in personnelDetail.teach_undergo" :key="index">
                      <td class="value" colspan="1">{{ item.degree }}</td>
                      <td class="value" colspan="1">{{ item.startDate }}</td>
                      <td class="value" colspan="1">{{ item.endDate }}</td>
                      <td class="value" colspan="1">{{ item.location }}</td>
                      <td class="value" colspan="2">{{ item.major }}</td>
                      <td class="value" colspan="1">{{ item.tutor }}</td>
                    </tr>

                    <tr>
                      <!-- <td class="column">教育经历(从本科填起)</td> -->
                      <td class="value" colspan="7" style="text-align:left;">
                        工作经历 ：
                      </td>

                    </tr>
                    <tr>
                      <td class="value" colspan="1">职称</td>
                      <td class="value" colspan="1">起始时间</td>
                      <td class="value" colspan="1">终止时间</td>
                      <td class="value" colspan="1">国家或地区</td>
                      <td class="value" colspan="2">工作单位</td>
                      <td class="value" colspan="1">职务</td>
                    </tr>
                    <tr v-for="(item, index) in personnelDetail.work_undergo" :key="index + 'work'">
                      <td class="value" colspan="1">{{ item.post }}</td>
                      <td class="value" colspan="1">{{ item.startDate }}</td>
                      <td class="value" colspan="1">{{ item.endDate }}</td>
                      <td class="value" colspan="1">{{ item.location }}</td>
                      <td class="value" colspan="2">{{ item.unit }}</td>
                      <td class="value" colspan="1">{{ item.partTime }}</td>
                    </tr>

                    <tr>
                      <td class="value" colspan="7" style="text-align:left;">
                        国际学术组织任职或兼职：
                        <br>
                        <br>
                        {{ personnelDetail.introduce }}
                        <br>
                        <br>
                      </td>
                    </tr>
                  </tbody>

                </table>

              </div>
            </el-card>
            <!-- 表格 -->
            <!-- 主要项目表格 -->
            <Card :sub-title="mainProjectData.title" :tip="mainProjectData.tip">
              <div slot="content" class="p1">
                <TableForm
                  ref="projectTableForm"
                  :config="mainProjectData"
                  style="margin: 20px;"
                />
              </div>
            </Card>
            <!-- 主要论文表格 -->
            <Card :sub-title="paperData.title" :tip="paperData.tip">
              <div slot="content">
                <TableForm
                  ref="paperTableForm"
                  :config="paperData"
                  style="margin: 20px"
                />
              </div>
            </Card>
            <!-- 主要著作表格 -->
            <Card :sub-title="mainBookData.title" :tip="mainBookData.tip">
              <div slot="content">
                <TableForm
                  ref="bookTableForm"
                  :config="mainBookData"
                  style="margin: 20px"
                />
              </div>
            </Card>
            <!-- 主要获奖表格 -->
            <Card
              :sub-title="prizeWinningData.title"
              :tip="prizeWinningData.tip"
            >
              <div slot="content">
                <TableForm
                  ref="winTableForm"
                  :config="prizeWinningData"
                  style="margin: 20px"
                />
              </div>
            </Card>
            <!-- 发明专利表格 -->
            <Card :sub-title="patentData.title" :tip="patentData.tip">
              <div slot="content">
                <TableForm
                  ref="patentTableForm"
                  :config="patentData"
                  style="margin: 20px"
                />
              </div>
            </Card>
            <!-- <Card v-if="personnelDetail.other" sub-title="其他成果">
            <el-link
              slot="content"
              type="primary"
              @click="handlePreview(personnelDetail.other)"
            ><i class="el-icon-view el-icon--right" />预览</el-link>
          </Card>
          <Card v-if="personnelDetail.planning" sub-title="来校后工作规划">
            <el-link
              slot="content"
              type="primary"
              @click="handlePreview(personnelDetail.planning)"
            ><i class="el-icon-view el-icon--right" />预览</el-link>
          </Card>
          <Card v-if="personnelDetail.prove" sub-title="成果证明">
            <el-link
              slot="content"
              type="primary"
              @click="handlePreview(personnelDetail.prove)"
            ><i class="el-icon-view el-icon--right" />预览</el-link>
          </Card>
          <Card v-if="personnelDetail.recommendation" sub-title="专家推荐信">
            <el-link
              slot="content"
              type="primary"
              @click="handlePreview(personnelDetail.recommendation)"
            ><i class="el-icon-view el-icon--right" />预览</el-link>
          </Card>
          <Card v-if="personnelDetail.spouse_resume" sub-title="配偶简历">
            <el-link
              slot="content"
              type="primary"
              @click="handlePreview(personnelDetail.spouse_resume)"
            ><i class="el-icon-view el-icon--right" />预览</el-link>
          </Card> -->
          </el-col>
          <!-- 11 -->
          <!-- <el-col :span="isLook ? 0 : 11">
          <Evaluate
            v-if="role === '专家' && dialogVisible"
            :personnel-id="personnelId.toString()"
            :personnel-detail="personnelDetail"
            @refresh="refresh"
          />
          <Decision
            v-if="
              role === '评委' &&
                dialogVisible &&
                Object.keys(personnelDetail).length > 0
            "
            :census="census"
            :personnel="personnelDetail"
            :expert-list="expertList"
            :treatment="treatment"
            :personnel-id="personnelId.toString()"
            @refresh="refresh"
          />
        </el-col> -->
        </el-row>
        <div class="box1">
          <Review :all-data="allData" :show-base="false" />
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import config from '../../config'
// import Evaluate from '../Evaluate'
// import Decision from '../Decision'
import Review from '../Review'
import { getPersonnelDetail } from '@/api/personnel'
import Card from '@/components/Card/index.vue'
import { Navbar, Sidebar } from '@/layout/components'

// import pdf from '../TestPdf'
export default {
  components: {
    // Evaluate,
    // Decision,
    Navbar,
    Review,
    Card,
    Sidebar

    // pdf
  },
  data () {
    return {
      baseUrl: process.env.VUE_APP_BASE_API,
      dialogVisible: false,
      // 主要项目表格
      mainProjectData: config.mainProjectData,
      // 主要著作表格
      mainBookData: config.mainBookData,
      // 主要获奖表格
      prizeWinningData: config.prizeWinningData,
      // 发明专利表格
      patentData: config.patentData,
      paperData: config.paperData,
      // 内层查看评审弹窗
      innerVisible: false,
      personnelDetail: {},
      allData: {},
      // role: sessionStorage.getItem('role'),
      role: localStorage.getItem('role'),
      isLook: true,
      // 人才id
      personnelId: '',
      // 专家学术评价情况数据
      census: {},
      // 专家信息列表
      expertList: [],
      // 国家标准费用
      treatment: {},
      print: {
        id: 'printArea',
        popTitle: '打印', // 打印配置页上方标题
        extraHead: '', // 最上方的头部文字，附加在head标签上的额外标签,使用逗号分隔
        preview: false, // 是否启动预览模式，默认是false（开启预览模式，可以先预览后打印）
        previewTitle: '', // 打印预览的标题（开启预览模式后出现）,
        previewPrintBtnLabel: '', // 打印预览的标题的下方按钮文本，点击可进入打印（开启预览模式后出现）
        zIndex: '', // 预览的窗口的z-index，默认是 20002（此值要高一些，这涉及到预览模式是否显示在最上面）
        previewBeforeOpenCallback () {}, // 预览窗口打开之前的callback（开启预览模式调用）
        previewOpenCallback () {}, // 预览窗口打开之后的callback（开启预览模式调用）
        beforeOpenCallback () {}, // 开启打印前的回调事件
        openCallback () {}, // 调用打印之后的回调事件
        closeCallback () {}, // 关闭打印的回调事件（无法确定点击的是确认还是取消）
        url: '',
        standard: '',
        extraCss: ''
      }
    }
  },
  computed: {
    // sidebar () {
    //   return this.$store.state.app.sidebar
    // },
    // device () {
    //   return this.$store.state.app.device
    // },
    // fixedHeader () {
    //   return this.$store.state.settings.fixedHeader
    // },
    // classObj () {
    //   return {
    //     hideSidebar: !this.sidebar.opened,
    //     openSidebar: this.sidebar.opened,
    //     withoutAnimation: this.sidebar.withoutAnimation,
    //     mobile: this.device === 'mobile'
    //   }
    // }
  },
  created () {
    // this.getPersonnelDetail(6)
  },
  methods: {
    open (id, flag = true) {
      // 人才id
      this.personnelId = id
      if (
        flag ||
        this.role === '管理员' ||
        this.role === '超级管理员' ||
        this.role === '学院'
      ) {
        this.isLook = true
      } else {
        this.isLook = false
      }
      this.dialogVisible = true
      this.getPersonnelDetail(id)
    },
    refresh () {
      this.dialogVisible = false
      this.$emit('refresh')
    },
    handleClose () {
      this.dialogVisible = false
    },
    openInnerVisible () {
      this.innerVisible = true
    },
    // 获取人才详细资料
    async getPersonnelDetail (id) {
      const res = await getPersonnelDetail({ id })
      this.allData = res.data
      // 专家学术评价情况
      this.census = res.data.census
      // 当前角色为评委时保存参与当前人才评价的专家信息
      if (this.role === '评委') {
        this.expertList = res.data.expert_name
        this.treatment = res.data.treatment
      }
      this.personnelDetail = res.data.personnel

      this.$refs.projectTableForm.setData(this.personnelDetail.project)
      this.$refs.bookTableForm.setData(this.personnelDetail.work)
      this.$refs.winTableForm.setData(this.personnelDetail.award)
      this.$refs.patentTableForm.setData(this.personnelDetail.patent)
      this.$refs.paperTableForm.setData(this.personnelDetail.paper)

      // this.personnelDetail.teach_undergo =
      //   this.personnelDetail.teach_undergo.replaceAll('&quot;', '"')
      // this.personnelDetail.work_undergo =
      //   this.personnelDetail.work_undergo.replaceAll('&quot;', '"')
      // this.personnelDetail.teach_undergo = JSON.parse(
      //   this.personnelDetail.teach_undergo.replaceAll('&quot;', '"')
      // )
      // this.personnelDetail.work_undergo = JSON.parse(
      //   this.personnelDetail.work_undergo.replaceAll('&quot;', '"')
      // )
    },
    handlePreview (path) {
      const fileUrl = process.env.VUE_APP_BASE_API + path
      if (fileUrl.indexOf('.pdf') !== -1) { return window.open(fileUrl, '_target') }

      const url = encodeURIComponent(fileUrl)
      const officeUrl =
        'http://view.officeapps.live.com/op/view.aspx?src=' + url
      window.open(officeUrl, '_target')
    }
  }
}
</script>
<style lang="scss" scoped>
/* 分页打印的问题 */
// table {
//   page-break-inside: avoid;
//   page-break-after: avoid;
//   page-break-before: avoid;
// }
.table{
    border-collapse: collapse;
    border-spacing: 0;
    background-color: transparent;
    display: table;
    width: 100%;
    max-width: 100%;
    width: 70vw;
    margin:0 auto;

  }
  .table td{
    text-align:center;
    vertical-align:middle;
    font-size: 14px;
    font-family: MicrosoftYaHei;
    color: #333333;
    font-weight: bold;
    padding: 8px 12px;

  }
  .table-bordered {
    border: 1px solid #ddd;
  }
//   *{
//     margin: 0px;
//     padding: 0px;
//   }
  .column{
    width:10vw;
    height:4vh;
    border:1px solid #333;
    background: #f1f1f1;
  }
  .value{
    width:15vw;
    height:4vh;
    border:1px solid #333;
  }

  ::v-deep .el-dialog__header{
    padding: 0 !important;
 }
  ::v-deep .el-dialog__body{
    padding: 0 1vw 1.5vw 1vw;
 }

::v-deep.el-dialog {
  background-color: #f8f8f8;
}

.avatar-img {
  max-width: 138px;
  height: 164px;
  margin: 0 auto;
}

.el-row {
  display: flex;
  flex-wrap: nowrap;
}

.box-card {
  .left-title {
    height: 35px;
    text-align: center;
    font-size: 20px;
    font-family: MicrosoftYaHei;
    font-weight: bold;
    color: #333333;
  }
  .el-row:nth-child(2) {
    .el-col {
      .el-row {
        // line-height: 34px;
        border-bottom: 1px solid #333;
        .el-col {
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 14px;
          font-family: MicrosoftYaHei;
          font-weight: bold;
          color: #333333;
          min-height: 40px;
          border-right: 1px solid #333;
          border-bottom: none;

          &:nth-last-child(2n + 1) {
            font-size: 14px;
            font-family: MicrosoftYaHei;
            font-weight: bold;
            // color: #ff0913;
          }
        }
      }
    }
  }
  .other {
    .el-row {
      // line-height: 34px;
      border: 1px solid #333;
      border-top: none;
      font-size: 14px;
      font-family: MicrosoftYaHei;
      font-weight: bold;
      color: #333333;
      .el-col {
        display: flex;
        align-items: center;
        justify-content: center;
        border-right: 1px solid #333;
        min-height: 40px;
        border-right: 1px solid #333;
        border-bottom: none;

        &:nth-last-child(2n + 1) {
          // padding-left: 27px;
          box-sizing: content-box;
          // margin-right: -40px;
          font-size: 14px;
          font-family: MicrosoftYaHei;
          font-weight: bold;
          // color: #ff0913;
        }
        &:nth-last-child(1) {
          border-right: none;
        }
      }
    }

    .table-header {
      .el-col {
        color: #333 !important;
      }
    }
    .table-body {
      .el-col {
        // color: #ff0913;
      }
    }
  }
}

// ::v-deep.box-card .other .el-row .el-col {
//   margin-left: -28.5px;
//   .content {
//     text-align: center;
//     margin-right: -28.5px;
//   }
// }
// .pd-l {
//   padding-left: 55.5px !important;
//   box-sizing: content-box !important;
// }
// .mg-l {
//   margin-left: -78px !important;
//   div {
//   margin-right: -36px !important;

//   }
// }
// .pd-r {
//   padding-right: 30px !important;
//   box-sizing: content-box !important;
//   div {
//     margin-right: -30px;
//   }
// }
</style>

<style media="print" lang="scss">

@page {
  size: auto;
  margin: 3mm;
}
@media print {
  html {
    background-color: #ffffff;
    height: auto;
    margin: 0px;
  }

  body {
    border: solid 1px black;
    margin: 10mm 15mm 10mm 15mm;
  }
  table {
    table-layout: auto !important;

    // border: solid 1px black;

  }
  .box-card {
    // margin-bottom: 100px;
  }
  //我的调整
  .box-card .sub-header .desc-wrap[data-v-a53d947a]{
    color: black;
    font-size: 12px;
  }
  [data-v-6abaa496].el-form{
    border: solid 1px black;

  }
  .el-card__body{
    color: black !important;
    // border: solid 1px black;

  }
  [data-v-6abaa496].el-table th, .el-table tr[data-v-6abaa496]{
    color: black !important;

    background: #2860c3 !important;

  }

  .el-card{
    border: solid 1px black;
    color: black !important;

  }
  .el-table{
    // min-width: 10;
    border: solid 1px black;
    color: black;

  }

  .p1{
    color: black !important;
    border: solid 1px black;

  }
  .el-table__header-wrapper .el-table__header {
    width: 100% !important;
    // border: solid 1px black;
  }
  .el-table__body-wrapper .el-table__body {
    width: 100% !important;
    // border: solid 1px black;

  }
  #pagetable table {
    table-layout: fixed !important;

  }

  .box1 {
    margin-top: 700px;
    // border: solid 1px black;

  }
  .el-table--border {
    border: 1px solid #ebeef5 !important;
    // border: solid 1px black;
  }

  .el-table th {
    // border: solid 1px black;
    color: #fff !important;
    background-color: #2860c3 !important;
    
  }
}

// @media print {
//   @page{
//       size:  auto;
//       margin: 3mm;

//    }
//   body{
// 	height:auto;
//   }
//   .printPage {
//     height: 291mm;   //分页  根据实际
//     position: relative;
//     &::before {
//         position: absolute; content: 'xx水印'; top:20%; right: 5%;  font-size: 48px; opacity: 0.1;  transform: rotate(30deg);
//     }
//     &::after {
//         position: absolute; content: 'xx水印'; bottom:20%; left: 5%;  font-size: 48px; opacity: 0.1;  transform: rotate(30deg);
//     }
//   }
// }
</style>
